<template>
  <div class="user-wrapper">
    <a-dropdown>
      <span class="action ant-dropdown-link">
        <a-avatar class="avatar" size="small" :src="avatar" />
        <span>{{ userName }}</span>
      </span>
      <a-menu slot="overlay">
        <a-menu-item key="1" @click="updatePassword">
          <a-icon type="setting" class="menu-icon" />
          <span>修改密码</span>
        </a-menu-item>

        <a-menu-item key="2" @click="handleLogout">
          <a-icon type="logout" class="menu-icon" />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <user-password ref="userPassword"></user-password>
  </div>
</template>

<script>
import { USER_INFO } from '@/store/mutation-types'
import UserPassword from './UserPassword'
export default {
  name: 'UserMenu',
  components: { UserPassword },
  data () {
    return {
      userName: '',
      avatar: require('@/assets/images/user.png'),
      isAdmin: true,
      total: 0
    }
  },
  created () {},
  mounted () {
    const userInfo = this.$ls.get(USER_INFO)
    this.userName = userInfo.userName
    if (userInfo.role_type === '2' && userInfo.tag === '2') {
      this.isAdmin = false
    }
  },
  methods: {
    showMessage () {
      this.$refs.message.open()
    },
    showAllOrder () {
      this.$router.push({ path: '/order/index/list' })
    },
    createOrder () {
      this.$router.push({ path: '/order/index/create' })
    },
    orgManagement () {
      this.$router.push({ path: '/organization/index/subAcount' })
    },
    showFinance () {
      this.$router.push({ path: '/finance/index/bill' })
    },
    handleLogout () {
      this.$confirm('真的要注销登录吗').then(() => {
        this.$store.dispatch('Logout')
      })
    },
    updatePassword () {
      this.$refs.userPassword.show()
    }
  }
}
</script>

<style lang="less" scoped>
@height: 59px;

.user-wrapper {
  text-align: right;
  .action {
    display: inline-block;
    line-height: @height;
    text-align: center;
    margin-left: 8px;
    padding: 0 12px;
    cursor: pointer;
    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }
    .action-icon {
      margin-right: 4px;
    }
    .menu-icon {
      margin-right: 8px;
    }
  }
  .logout_title {
    color: inherit;
    text-decoration: none;
  }
  .avatar {
    margin-right: 8px;
  }
}
</style>
